<template>
	<view class="label_list_popup" v-if="is_label_search_popup">
		<view class="label_list_popup_content">
			<view class="label_list_popup_search">
				<view class="label_list_popup_close" @click="close">取消</view>
				<input class="label_list_popup_keywords" type="text" v-model="search_label_keywords" @change="selectLabelSearchPopup" placeholder="请输入行业词"/>
				<view class="label_list_popup_confirm" @click="close">确定</view>
			</view>
			<picker-view :value="multiIndex" :indicator-style="indicatorStyle" @change="bindChange" class="picker-view">
				<picker-view-column class="one_label">
					<view class="label_item" v-for="(item,index) in setLabelList" :key="index">{{item.label_name}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="label_item" v-for="(item,index) in setLabelList[multiIndex[0]].children" :key="index">{{item.label_name}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indicatorStyle: `height: 50px;`,
				search_label_keywords: '',
				is_loading_label: false,
			}
		},
		props: {
			setLabelList: {
				type: Array,
				default: () => []
			},
			multiIndex: {
				type: Array,
				default: () => []
			},
			is_label_search_popup: {
				type: Boolean,
				default: false,
			},
		},
		methods: {
			bindChange(e) {
				let that = this;
				let value = e.detail.value;
				let multiIndex = that.multiIndex;
				if(value[0] != multiIndex[0]) {
					multiIndex[0] = value[0];
					multiIndex[1] = 0;
				} else {
					multiIndex[1] = value[1];
				}
				// that.multiIndex = multiIndex;
				that.$emit('changeMultiIndex', multiIndex);
				// that.$set(that, 'multiIndex', multiIndex);
			},
			async selectLabelSearchPopup() {
				let that = this;
				if(that.is_loading_label) return false;
				that.is_loading_label = true;
				await that.$emit('selectLabelSearchPopup', that.search_label_keywords)
				that.is_loading_label = false;
			},
			close() {
				this.$emit('closeLabelSearchPopup');
			}
		}
	}
</script>
<style lang="scss" scoped>
.picker-view {
	width: 750rpx;
	height: 900rpx;
	margin-top: 20rpx;
}
.label_list_popup {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	z-index: 15;
	.label_list_popup_content {
		position: fixed;
		background-color: #fff;
		left: 0;
		bottom: 0;
		.label_list_popup_search {
			padding: 30rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #F5F5F5;
			font-size: 38rpx;
			font-weight: 500;
			.label_list_popup_keywords {
				flex: 1;
				border: 1px solid #F5F5F5;
				margin: 0 30rpx;
				padding: 15rpx;
				font-size: 26rpx;
			}
			.label_list_popup_confirm {
				color: #07C160;
			}
		}
		.label_item {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
		}
		.one_label {
			.label_item {
				font-size: 42rpx;
			}
		}
	}
}
</style>
